@extends("layout.app")

@section("page-content")
    <div class="container mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-800 mb-4 sm:mb-0">Events</h1>
            @can('create-event')
                <a
                    class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
                    href="/new-event"
                >
                    Add New Event
                </a>
            @endcan
        </div>

        <!-- Filters -->
        <div class="bg-white p-6 rounded-lg shadow-md mb-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label class="block text-gray-700 mb-2">Category</label>
                    <select id="category-filter" class="w-full p-2 border rounded">
                        <option value="">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{$category->name}}">{{$category->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-gray-700 mb-2">Title / Description</label>
                    <input
                        id="title-filter"
                        type="text"
                        placeholder="Search by title / description..."
                        class="w-full p-2 border rounded"
                    />
                </div>
                <div>
                    <label class="block text-gray-700 mb-2">Start Time</label>
                    <input
                        id="start-time-filter"
                        type="datetime-local"
                        class="w-full p-2 border rounded"
                    />
                </div>
                <div>
                    <label class="block text-gray-700 mb-2">End Time</label>
                    <input
                        id="end-time-filter"
                        type="datetime-local"
                        class="w-full p-2 border rounded"
                    />
                </div>
            </div>
            <div class="mt-4">
                <label class="block text-gray-700 mb-2">Tags</label>
                <div id="tag-cloud" class="flex flex-wrap gap-2">
                    @foreach($tags as $tag)
                    <span
                        class="text-[0.8rem] bg-blue-200 text-blue-800 px-2 py-1 rounded cursor-pointer hover:bg-blue-300"
                        onclick="toggleTag(this, '{{$tag->name}}')"
                    >{{$tag->name}}</span>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Event Table (Desktop) -->
        <div class="hidden md:block">
            <table
                class="w-full border-collapse bg-white rounded-lg shadow-md mb-6"
            >
                <thead>
                <tr class="bg-gray-200">
                    <th class="p-4 text-left text-gray-700">Name</th>
                    <th class="p-4 text-left text-gray-700">Category</th>
                    <th class="p-4 text-left text-gray-700">Time</th>
                    <th class="p-4 text-left text-gray-700">Participants</th>
                    <th class="p-4 text-left text-gray-700">Comments</th>
                    <th class="p-4 text-left text-gray-700">Type</th>
                    @can("create-event")
                        <th class="p-4 text-left text-gray-700">Actions</th>
                    @endcan
                </tr>
                </thead>
                <tbody>
                @foreach($events as $event)
                    <tr class="border-b">
                        <td class="p-4">
                            <a
                                href="/events/{{$event->id}}"
                                class="text-blue-500 hover:underline"
                            >{{$event->title}}</a
                            >
                        </td>
                        <td class="p-4">{{$event->category->name}}</td>
                        <td class="p-4">{{$event->start_at}} - {{$event->end_at}}</td>
                        <td class="p-4">
                            <div class="flex items-center space-x-2">
                                <div
                                    class="relative w-2/3 bg-gray-200 rounded-full h-6 overflow-hidden"
                                    role="progressbar"
                                    aria-valuenow="5"
                                    aria-valuemin="0"
                                    aria-valuemax="100"
                                    aria-label="Participants progress"
                                >
                                    <div
                                        class="h-6 rounded-l-full"
                                        style="width: {{$event->participants()->count()/$event->capacity*100}}%; background-color: #10b981"
                                    ></div>
                                </div>
                                <span
                                    class="text-gray-700 text-sm font-semibold"
                                    title="5/100 participants"
                                >{{$event->participants()->count()}}/{{$event->capacity}}</span
                                >
                            </div>
                        </td>
                        <td class="p-4">{{$event->comments()->count()}}</td>
                        <td class="p-4">{{$event->type}}</td>
                        @can("create-event")
                            <td class="p-4">
                                @can("modify-event",$event)
                                    <a
                                        href="edit-event.html"
                                        class="text-blue-500 hover:underline mr-2"
                                    >Edit</a
                                    >
                                    <a href="#" class="text-red-500 hover:underline">Delete</a>
                                @endcan
                            </td>
                        @endcan

                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <!-- Event Cards (Mobile) -->
        <div class="md:hidden space-y-4 mb-6">
            @foreach($events as $event)
                <div class="bg-white p-4 rounded-lg shadow-md">
                    <h3 class="text-lg font-semibold text-gray-800">
                        <a href="/events/{{$event->id}}" class="text-blue-500 hover:underline"
                        >{{$event->title}}</a
                        >
                    </h3>
                    <p class="text-gray-600">Category: {{$event->category->name}}</p>
                    <p class="text-gray-600">Time: {{$event->start_at}} - {{$event->end_at}}</p>
                    <p class="text-gray-600">Participants: {{$event->participants()->count()}}/{{$event->capacity}}</p>
                    <p class="text-gray-600">Comments: {{$event->comments()->count()}}</p>
                    <p class="text-gray-600">Type: {{$event->type}}</p>
                    @can("modify-event",$event)
                        <div class="mt-2">
                            <a href="#" class="text-blue-500 hover:underline mr-2">Edit</a>
                            <a href="#" class="text-red-500 hover:underline">Delete</a>
                        </div>
                    @endcan
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div
            class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0"
        >
            <p class="text-gray-700">
                Showing <span id="current-page">1</span> of
                <span id="total-pages">5</span> pages (<span id="total-records"
                >23</span
                >
                records)
            </p>
            <div class="flex items-center space-x-2">
                <button
                    id="prev-page"
                    class="bg-gray-300 text-gray-700 px-3 py-1 rounded hover:bg-gray-400 disabled:opacity-50"
                    disabled
                >
                    Previous
                </button>
                <span class="text-gray-700"
                >Page <span id="page-number">1</span></span
                >
                <button
                    id="next-page"
                    class="bg-gray-300 text-gray-700 px-3 py-1 rounded hover:bg-gray-400"
                >
                    Next
                </button>
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-gray-700">Records per page:</label>
                <select id="per-page" class="p-2 border rounded">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
            </div>
        </div>
    </div>
@endsection

@section("script")
    <script>
        function toggleTag(element, tag) {
            element.classList.toggle("bg-blue-500");
            element.classList.toggle("text-white");
            console.log("Selected tag:", tag);
        }
    </script>
@endsection
